<template>
  <div>
    <van-swipe v-bind="$attrs">
      <van-swipe-item v-for="(ban,ind) in banners" :key="ban.url+ind">
        <div class="img_content">
          <img class="ban_img" :src="ban.imageUrl" alt="">
          <div v-if="ban.typeTitle" :style="{background:ban.titleColor}" class="tag">{{ban.typeTitle}}</div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props:{
    banners:{
      type:Array,
      default:[]
    }
  }
};
</script>

<style lang="scss" scoped>
.img_content{
  position: relative;
  width: 350px;
  height: 140px;
  margin: 0 auto;
  border-radius: 7px;
  overflow: hidden;
  .tag{
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 1px 8px;
     border-radius: 7px 0 0 0;
  }
}
.ban_img{
  width: 100%;
  height: 100%;
  display: block;
}
</style>